<template>
    <div id="edit" class="container-fluid padding" style="size: 12px">
        <form class="layui-form-pane">
            <div class="layui-form-item">
                <label class="layui-form-label">文件名称</label>
                <div class="layui-form layui-input-block">
                    <input type="text" v-model="filename" required readonly lay-verify="required" placeholder="文件名称"
                           autocomplete="off" class="layui-input">
                </div>
                <div class="layui-form layui-form-item">
                    <label class="layui-form-label">开/关</label>
                    <div class="layui-input-block">
                        <input type="checkbox" id="switch" v-bind:checked="showIvr" name="open" lay-skin="switch"
                               lay-filter="switch" lay-text="ON|OFF">
                    </div>
                </div>
            </div>
            <div v-show="showIvr">
                <!--普通配置-->
                <div id="peizhi" >
                    <fieldset class="layui-elem-field" v-for="(item,index) in configs.menu" v-bind:key="index">
                        <!--普通配置-->
                        <legend  class="layui-form">配置名称<input type="text" lay-verify="required" autocomplete="off"
                                           v-model="item['@attributes']['name']">
                            <button type="button" @click="peizhiDelete(index)"
                                    class="layui-btn layui-btn-primary layui-btn-sm"><i class="layui-icon"></i>
                            </button>
                        </legend>
                        <div class="layui-field-box">
                            <div class="layui-form-item">
                                <label class="layui-form-label">最开始的欢迎音</label>
                                <div class="layui-input-block">
                                    <button type="button" v-bind:id="'greet_long_'+index" v-bind:disabled="item['@attributes']['tts-open-greet-long']=='true'"
                                            v-bind:class="item['@attributes']['tts-open-greet-long']!=='true'?'layui-btn':'layui-btn  layui-btn-disabled'"><i
                                            class="layui-icon"></i>点击上传/修改
                                    </button>
                                    <input type="text" autocomplete="off" v-model="item['@attributes']['greet-long']">
                                    <a v-if="item['@attributes']['tts-open-greet-long']!=='true'"
                                       class="layui-icon layui-icon-play layedit-tool-active"
                                       style="color: #00a53b;cursor: pointer"
                                       v-bind:href="item['@attributes']['http-src-greet-long']"
                                    target="_blank">播放声音</a>
                                    <b-form-checkbox lay-ignore v-model="item['@attributes']['tts-open-greet-long']" value="true" unchecked-value="false">
                                        打开TTS，请在前面新增“say: ”,say:后面有个空格
                                    </b-form-checkbox>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">简短的提示音</label>
                                <div class="layui-input-block">
                                    <button type="button" v-bind:id="'greet_short_'+index" v-bind:disabled="item['@attributes']['tts-open-greet-short']=='true'"
                                            v-bind:class="item['@attributes']['tts-open-greet-short']!=='true'?'layui-btn':'layui-btn  layui-btn-disabled'"><i
                                            class="layui-icon"></i>点击上传/修改
                                    </button>
                                    <input type="text" autocomplete="off" v-model="item['@attributes']['greet-short']">
                                    <a v-if="item['@attributes']['tts-open-greet-short']!=='true'"
                                       class="layui-icon layui-icon-play layedit-tool-active"
                                       style="color: #00a53b;cursor: pointer"
                                       v-bind:href="item['@attributes']['http-src-greet-short']"
                                       target="_blank">播放声音</a>
                                    <b-form-checkbox lay-ignore v-model="item['@attributes']['tts-open-greet-short']" value="true" unchecked-value="false">
                                        打开TTS，请在前面新增“say: ”,say:后面有个空格
                                    </b-form-checkbox>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">用户按错键提示音</label>
                                <div class="layui-input-block">
                                    <button type="button" v-bind:id="'invalid_sound_'+index" v-bind:disabled="item['@attributes']['tts-open-invalid-sound']=='true'"
                                            v-bind:class="item['@attributes']['tts-open-invalid-sound']!=='true'?'layui-btn':'layui-btn  layui-btn-disabled'"><i
                                            class="layui-icon"></i>点击上传/修改
                                    </button>
                                    <input type="text" autocomplete="off"
                                           v-model="item['@attributes']['invalid-sound']">
                                    <a v-if="item['@attributes']['tts-open-invalid-sound']!=='true'"
                                       class="layui-icon layui-icon-play layedit-tool-active"
                                       style="color: #00a53b;cursor: pointer"
                                       v-bind:href="item['@attributes']['http-src-invalid-sound']"
                                       target="_blank">播放声音</a>
                                    <b-form-checkbox lay-ignore v-model="item['@attributes']['tts-open-invalid-sound']" value="true" unchecked-value="false">
                                        打开TTS，请在前面新增“say: ”,say:后面有个空格
                                    </b-form-checkbox>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">退出声音</label>
                                <div class="layui-input-block">
                                    <button type="button" v-bind:id="'exit_sound_'+index" v-bind:disabled="item['@attributes']['tts-open-exit-sound']=='true'"
                                            v-bind:class="item['@attributes']['tts-open-exit-sound']!=='true'?'layui-btn':'layui-btn  layui-btn-disabled'"><i
                                        class="layui-icon"></i>点击上传/修改
                                    </button>
                                    <input type="text" autocomplete="off" v-model="item['@attributes']['exit-sound']">
                                    <a
                                        v-if="item['@attributes']['tts-open-exit-sound']!=='true'"
                                        class="layui-icon layui-icon-play layedit-tool-active"
                                       style="color: #00a53b;cursor: pointer"
                                       v-bind:href="item['@attributes']['http-src-exit-sound']"
                                       target="_blank">播放声音</a>
                                    <b-form-checkbox  lay-ignore v-model="item['@attributes']['tts-open-exit-sound']" value="true" unchecked-value="false">
                                        打开TTS，请在前面新增“say: ”,say:后面有个空格
                                    </b-form-checkbox>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">超时时间</label>
                                <div class="layui-input-block">
                                    <input type="text" v-model="item['@attributes']['timeout']" placeholder=""
                                           autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">容忍用户按键次数</label>
                                <div class="layui-input-block">
                                    <input type="text" v-model="item['@attributes']['max-failures']" placeholder=""
                                           autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">TTS引擎</label>
                                <div class="layui-input-block">
                                    <b-form-select lay-ignore v-model="item['@attributes']['tts-engine']"
                                                   :options="[{value: 'tts_commandline',text: 'tts命令行模块' }]"
                                                   class="mb-3"/>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">TTS声音</label>
                                <div class="layui-input-block">
                                    <b-form-select lay-ignore v-model="item['@attributes']['tts-voice']"
                                                   :options="[{value: 'Ting-Ting',text: '婷婷' }]" class="mb-3"/>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">最大超时次数</label>
                                <div class="layui-input-block">
                                    <input type="text" v-model="item['@attributes']['max-timeouts']" autocomplete="off"
                                           class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">两次按键的最大间隔（毫秒）</label>
                                <div class="layui-input-block">
                                    <input type="text" v-model="item['@attributes']['inter-digit-timeout']"
                                           autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">最大接收的号码位数</label>
                                <div class="layui-input-block">
                                    <input type="text" v-model="item['@attributes']['digit-len']" autocomplete="off"
                                           class="layui-input">
                                </div>
                            </div>
                        </div>
                        <!--按键转接配置-->
                        <div class="padding">
                            <fieldset class="layui-elem-field">
                                <legend>按键转接配置（越往下权限越高）</legend>
                                <div class="layui-field-box">
                                    <table class="layui-table" lay-size="sm">
                                        <thead>
                                        <tr>
                                            <th>按下按键（0-9,*,#）也可以用正则</th>
                                            <th>按键动作</th>
                                            <th>按键参数</th>
                                            <th>操作</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        <!--是多条数据的时候-->
                                        <template v-for="(myitem,myIndex) in item.entry">
                                            <tr v-bind:key="myIndex">
                                                <td><input type="text" v-model="myitem['@attributes'].digits"
                                                           @click="selectDigits(index,myIndex)" placeholder=""
                                                           class='layui-input' autocomplete="off" readonly></td>
                                                <td class="layui-form">
                                                    <!--<button-counter :model="myitem['@attributes'].action">-->
                                                        <!--<select  v-model="myitem['@attributes'].action">-->
                                                            <!--<option value=""></option>-->
                                                            <!--<option value="menu-exec-app">直接执行命令</option>-->
                                                            <!--<option value="menu-sub">跳到下一个菜单</option>-->
                                                            <!--<option value="menu-top">回到上一层菜单</option>-->
                                                        <!--</select>-->
                                                    <!--</button-counter>-->
                                                    <b-form-select lay-ignore v-model="myitem['@attributes'].action" :options="[{value: 'menu-exec-app',text: '直接执行命令' },{value: 'menu-sub',text: '跳到下一个菜单' },{value: 'menu-top',text: '回到上一层菜单/重新收听' },]" />
                                                </td>
                                                <td><input type="text" v-model="myitem['@attributes'].param"
                                                           placeholder=""
                                                           @click="selectParams(index,myIndex)"
                                                           class='layui-input' autocomplete="off" readonly></td>
                                                <td>
                                                    <button class="layui-btn layui-btn-danger layui-btn-xs"
                                                            type="button"
                                                            @click="deleteAnjian(index,myIndex)" lay-event="del">删除
                                                    </button>
                                                </td>
                                            </tr>
                                        </template>
                                        </tbody>
                                    </table>
                                    <div class="layui-form-item">
                                        <a class="layui-btn layui-btn-sm" href="javascript:;" title="新增按键转接事件"
                                           @click="addAnjian(index)"><i class="layui-icon">新增按键转接事件</i></a>
                                    </div>
                                </div>
                            </fieldset>
                        </div>

                    </fieldset>
                </div>
                <!--新增配置的按钮-->
                <div class="layui-form-item">
                    <a class="layui-btn layui-btn-sm" href="javascript:;" title="新增配置" @click="peizhiAdd()"><i
                            class="layui-icon">新增配置</i></a>
                </div>
            </div>
            <div class="layui-form-item">
                <button class="layui-btn layui-btn-lg" lay-submit="" lay-filter="save">保存</button>
            </div>
        </form>
        <!--隐藏层 与电话的按键类似-->
        <div style="display: none" id="selectDigits">
            <div class="padding">
                <div class="layui-input-block">
                    <b-form-group label="">
                        <b-form-radio-group v-model="selected" :options="select"
                                            name="radioInline"></b-form-radio-group>
                    </b-form-group>
                </div>
                <!--此处用vue bootstrap 能够实现双向绑定digits-->
                <div class="layui-input-block">
                    <b-form-group label="">
                        <b-form-checkbox-group v-model="selectedDigits" :options="digits"></b-form-checkbox-group>
                    </b-form-group>
                </div>
                <div class="layui-input-block">
                    计算结果：<input type="text" class="layui-input" v-model="computeResult" readonly>
                </div>
                <div class="padding">
                    <div class="layui-input-block">
                        <button type="button" class="layui-btn layui-btn-small" @click="saveDigits()">保存</button>
                    </div>
                </div>
            </div>
        </div>
        <!--隐藏层 参数选择类似-->
        <div style="display: none" id="selectParams">
            <div class="padding">
                <div class="layui-input-block">
                    <b-form-group label="命令块">
                        <b-form-checkbox-group v-model="selectedParams" :options="params">
                        </b-form-checkbox-group>
                    </b-form-group>
                </div>
                <div class="layui-input-block">
                    <b-form-input v-model="selectedParams[phoneIndex]" type="text" placeholder="输入内容"></b-form-input>
                </div>
                <div class="layui-input-block">
                    <legend class="col-form-label pt-0">计算结果：</legend>
                    <input type="text" class="form-control" v-model="computeParams" readonly>
                </div>
                <div class="layui-input-block">
                    <legend class="col-form-label pt-0">翻译结果：</legend>
                    <input type="text" class="form-control" v-model="computeParamsCh" readonly>
                </div>
                <div class="padding">
                    <div class="layui-input-block">
                        <button type="button" class="layui-btn layui-btn-small" @click="saveParams()">保存</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "index",
        // components:{
        //     "afterRender":afterRender,
        // },
        beforeCreate: function () {
            this.$nextTick(function () {
                layui.use('form');//在vue之前渲染出来form
                layui.use('upload');
                var that = this;
                that.filename = this.$my_.$_GET['name'];
                that.path = this.$my_.$_GET['path'];
                //拿到了xml文件的内容数据后就将其解析成我们需要的格式
                that.$post('cti-manager-ivr/parse-ivr-xml-file?id=' + this.$my_.$_GET['id'], {})
                    .then((response) => {//这里使用了ES6的语法
                        if (response.data) {//拿到解析的结果成功了
                            try {
                                //对xml的内容赋值
                                that.configs = response.data.data;
                                that.afterRender();//上面的赋值渲染完成后执行  // 定义一个名为 button-counter 的新组件
                            }catch (e) {
                               consoleLog(e)
                            }
                        }
                    }).catch((response) => {
                    layer.msg("错误！", {icon: 2});
                });
            });
        },
        created: function () {
            this.$nextTick(function () {
            });
        },
        mounted: function () {
            this.$nextTick(function () {
            });
        },
        data() {
            return {

                filename: "",
                path: "",
                computeResult: "",//计算的所有结果
                computeDigits: "",//计算的数字结果
                computeParams: "",//计算的数字结果
                computeParamsCh: "",//计算的中文结果
                selected: "0",
                select: [
                    {text: '单选', value: '-1', temp: ""},
                    {text: '多选', value: '0', temp: ""},
                    {text: '以这些数字开头', value: '1', temp: ""},
                    {text: '以这些数字结尾', value: '2', temp: ""},
                    {text: '匹配所有号码', value: '3', temp: ""},
                ],
                digits: [
                    {text: "0", value: "0"},
                    {text: "1", value: "1"},
                    {text: "2", value: "2"},
                    {text: "3", value: "3"},
                    {text: "4", value: "4"},
                    {text: "5", value: "5"},
                    {text: "6", value: "6"},
                    {text: "7", value: "7"},
                    {text: "8", value: "8"},
                    {text: "9", value: "9"},
                    {text: "*", value: "*"},
                    {text: "#", value: "#"}
                ],
                selectedDigits: [],
                params: [
                    {text: "无", value: "$1"},
                    {text: "转接到（电话号码）", value: "transfer"},
                    {text: "嫁接到（通道）", value: "bridge"},
                    {text: "文件类型", value: "XML"},
                    {text: "默认", value: "default"},
                    {text: "未知参数", value: "enum"},
                    {text: "未知参数2", value: "features"},
                ],
                selectedParams: [],//存的是选中的命令行的数组
                state: 0,
                phoneIndex: "",
                digitIndex: {index: {}, windowsIndex: ""},//打开的数字选择窗口的索引以及编号
                configs: {},
            }
        },
        updated: function () {
            this.$nextTick(function () {
            });
        },
        computed: {
            showIvr: {
                get: function () {
                    if (this.configs.menu !== undefined) {
                        if (this.configs.menu.length >= 1) {
                            return this.configs.menu[0]['@attributes']['show-ivr'] == 'show'
                        } else {
                            return this.configs.menu['@attributes']['show-ivr'] == 'show'
                        }
                    }
                },
                set: function (show) {
                    if (this.configs.menu !== undefined) {
                        if (this.configs.menu.length >= 1) {
                            if (show == true) {
                                this.configs.menu[0]['@attributes']['show-ivr'] = "show";
                            } else {
                                this.configs.menu[0]['@attributes']['show-ivr'] = "hidden";
                            }
                        } else {
                            if (show == true) {
                                this.configs.menu['@attributes']['show-ivr'] = "show";
                            } else {
                                this.configs.menu['@attributes']['show-ivr'] = "hidden";
                            }
                        }
                    }
                }
            }
        },
        watch: {
            computeParams: {
                handler: function () {
                    this.parseDigits(this.configs.menu[this.digitIndex.index.index].entry[this.digitIndex.index.myIndex]['@attributes']['digits']);
                    this.$set(this.params[0], "text", this.computeResult);
                    this.parseParamsCh();
                },
                deep: true,
            },
            selectedDigits: {//选中数字触发
                handler: function () {
                    this.handlerDigits();
                },
                deep: true,
            },
            selected: {
                handler: function () {
                    this.handlerDigits();
                },
                deep: true
            },
            selectedParams: {//选中命令触发
                handler: function () {
                    if (this.selectedParams[this.phoneIndex] == "" && this.state == 0) {
                        this.state = 1;
                        var temp = this.selectedParams.filter(function (e) {
                            return e != null && e != "" && e != undefined;
                        })
                        this.selectedParams = temp;
                        this.phoneIndex = this.selectedParams.length;
                        this.selectedParams[this.phoneIndex] = "";
                    } else {
                        this.state = 0;
                    }
                    this.handlerParams();
                },
            },
        },
        methods: {
            selectDigits: function (index, myIndex) {//选择按键 点击后弹出窗口
                var that = this;
                that.digitIndex.index = {index: index, myIndex: myIndex};//保存打开的窗户的索引，记录点击的是哪个数字键
                that.parseDigits(that.configs.menu[index].entry[myIndex]['@attributes']['digits']);
                this.$nextTick(function () {
                    var type = this.configs.menu[this.digitIndex.index.index].entry[this.digitIndex.index.myIndex]['@attributes']['type'];
                    that.selected = type == undefined ? "-1" : type;
                    that.digitIndex.windowsIndex = layer.open({
                        type: 1,
                        skin: 'layui-layer-demo', //样式类名
                        closeBtn: 1, //不显示关闭按钮
                        anim: 2,
                        area: ['50%', '60%'], //宽高
                        shadeClose: true, //开启遮罩关闭
                        content: $("#selectDigits")
                    });//点击事件会丢掉，不能用 $("#selectDigits").html()，只能用$("#selectDigits")的对象
                });
            },
            handlerDigits: function () {//处理数字 点中数字后触发的事件
                if (this.selected == "-1") {
                    loop(1, () => {
                        this.computeDigits = "";
                        this.selectedDigits.splice(0, this.selectedDigits.length - 1);
                        this.computeDigits = this.selectedDigits[0];
                        this.computeResult = "这个按键：" + this.computeDigits;
                    })//防止出现事件监听死循环
                }
                if (this.selected == "0") {
                    this.computeDigits = "";
                    for (let i = 0; i < this.selectedDigits.length; i++) {
                        this.computeDigits += this.selectedDigits[i] + ",";
                    }
                    this.computeDigits = trim(this.computeDigits, ",");
                    this.computeResult = "这些按键：" + this.computeDigits;
                }
                if (this.selected == "1") {
                    this.computeDigits = "";
                    for (let i = 0; i < this.selectedDigits.length; i++) {
                        this.computeDigits += this.selectedDigits[i];
                    }
                    this.computeDigits = trim(this.computeDigits, ",");
                    this.computeResult = "这些数字开始：" + this.computeDigits;
                }
                if (this.selected == "2") {
                    this.computeDigits = "";
                    for (let i = 0; i < this.selectedDigits.length; i++) {
                        this.computeDigits += this.selectedDigits[i];
                    }
                    this.computeDigits = trim(this.computeDigits, ",");
                    this.computeResult = "这些数字结束：" + this.computeDigits;
                }
                if (this.selected == "3") {
                    this.computeDigits = '/^([0-9]*)$/';
                    this.computeResult = "所有的电话号码：" + this.computeDigits;
                }
            },
            parseDigits: function (v) {//解析数字，将其转化为 freeswitch可以识别的命令
                if (this.digitIndex.index.index !== undefined) {
                    var type = this.configs.menu[this.digitIndex.index.index].entry[this.digitIndex.index.myIndex]['@attributes']['type'];
                    this.selectedDigits = [];//清空，然后在新增数据
                    switch (type) {
                        case "0":
                            this.computeDigits = v.substr(v.lastIndexOf("(") + 2, v.lastIndexOf(")") - v.lastIndexOf("(") - 4);
                            //让数字按钮变为选择,触发渲染
                            this.selectedDigits = this.computeDigits.split(",");
                            break;
                        case "1":
                            this.computeDigits = v.substr(v.lastIndexOf("(") + 1, v.lastIndexOf(")") - v.lastIndexOf("(") - 7);
                            this.selectedDigits = this.computeDigits.split("");
                            break;
                        case "2":
                            this.computeDigits = v.substr(v.lastIndexOf("(") + 7, v.lastIndexOf(")") - v.lastIndexOf("(") - 7);
                            this.selectedDigits = this.computeDigits.split("");
                            break;
                        case "3":
                            this.computeDigits = "";
                            break;
                        default:
                            this.computeDigits = this.configs.menu[this.digitIndex.index.index].entry[this.digitIndex.index.myIndex]['@attributes']['digits'];
                            this.selectedDigits.push(this.computeDigits);
                            break;
                    }
                }
                return this.computeDigits;
            },
            saveDigits: function () {//保存数字到前台
                layer.close(this.digitIndex.windowsIndex);//关闭窗口
                var d0 = '';
                var d2 = '';
                if (this.selected == "0") {//匹配多个数字，单个数字
                    d0 = '/^([';
                    d2 = ']$)$/';
                }
                if (this.selected == "1") {//以数字开始
                    d0 = '/^(';
                    d2 = '[0-9]*)$/';
                }
                if (this.selected == "2") {//以数字结束
                    d0 = '/^([0-9]*';
                    d2 = ')$/';
                }
                this.configs.menu[this.digitIndex.index.index].entry[this.digitIndex.index.myIndex]['@attributes']['digits'] = d0 + this.computeDigits + d2;
                this.configs.menu[this.digitIndex.index.index].entry[this.digitIndex.index.myIndex]['@attributes']['type'] = this.selected;
            },
            selectParams: function (index, myIndex) {//点击后弹出窗口,选择参数
                var that = this;
                that.digitIndex.index = {index: index, myIndex: myIndex};//保存打开的窗户的索引，记录点击的是哪个数字键
                var pr = that.configs.menu[index].entry[myIndex]['@attributes']['param'];
                if (pr == undefined) {//必须要先在窗口弹出来的时候立马新增一个属性，这样就会刷新视图，
                    // 数据绑定到视图，要一段时间，那样当改变数据会动态刷新
                    this.$set(this.configs.menu[index].entry[myIndex]['@attributes'], 'param', "");
                }
                that.parseParams(that.configs.menu[index].entry[myIndex]['@attributes']['param']);
                this.$nextTick(function () {
                    that.digitIndex.windowsIndex = layer.open({
                        type: 1,
                        skin: 'layui-layer-demo', //样式类名
                        closeBtn: 1, //不显示关闭按钮
                        anim: 2,
                        area: ['50%', '60%'], //宽高
                        shadeClose: true, //开启遮罩关闭
                        content: $("#selectParams")
                    });
                });
            },
            handlerParams: function () {//处理命令 点中命令后触发的事件
                this.computeParams = "";
                for (let i = 0; i < this.selectedParams.length; i++) {
                    this.computeParams += this.selectedParams[i] + ' ';
                }
                this.computeParams = this.computeParams.trim();
            },
            parseParams: function (v) {//解析参数 ，将其转化为 freeswitch可以识别的命令
                this.computeParams = v;//让计算结果赋值
                this.selectedParams = v.split(" ");//将命令转化为一个一个命令块
            },
            parseParamsCh: function () {//解析中文参数 ，将其转化为 人员 可以识别的命令
                this.computeParamsCh = "";
                var that = this;
                for (let i = 0; i < this.selectedParams.length; i++) {
                    //比较两者是否相等，如果不相等的话就表明，只能用text显示框来显示
                    var temp = this.params.filter(function (value) {
                        return value.value == that.selectedParams[i];
                    });
                    if (temp.length == 0) {//当没有的命令查到了就放在 输入框 里面
                        this.phoneIndex = i;
                        this.phone = this.selectedParams[i];
                        this.computeParamsCh += that.selectedParams[i] + " ";//中文的参数翻译
                    } else {//有的命令
                        this.computeParamsCh += temp[0]['text'] + " ";//中文的参数翻译
                    }
                }
            },
            saveParams: function () {//保存数字到前台
                layer.close(this.digitIndex.windowsIndex);//关闭窗口
                this.$set(this.configs.menu[this.digitIndex.index.index].entry[this.digitIndex.index.myIndex]['@attributes'], 'param', this.computeParams);
            },
            addAnjian: function (index) {//新增按键的事件
                this.configs.menu[index]['entry'].push({"@attributes": {action: "", digits: "", param: "",}});
                this.$nextTick(function () {
                    layui.form.render();//在vue之前渲染出来form
                });
            },
            deleteAnjian: function (index, myIndex) {
                var that = this;
                var cIndex = layer.confirm("是否要删除该按键配置？", function () {
                    layer.close(cIndex);
                    that.configs.menu[index].entry.splice(myIndex, 1);
                    layer.msg("删除成功！", {icon: 1});
                });
            },
            peizhiDelete: function (index) {
                var that = this;
                if (index == 0) {
                    layer.msg("不能删除基础配置！", {icon: 2});
                } else {
                    var cIndex = layer.confirm("是否要删除该配置？", function () {
                        layer.close(cIndex);
                        that.configs.menu.splice(index, 1);
                        layer.msg("删除成功！", {icon: 1});
                    });
                }
            },
            peizhiAdd: function (index) {//新增普通配置
                var that = this;
                var menu = {
                    "@attributes": {
                        "name": "",
                        "greet-long": "",
                        "greet-short": "",
                        "inter-digit-timeout": "",
                        "invalid-sound": "",
                        "exit-sound": "",
                        "timeout": "",
                        "max-failures": "",
                        "max-timeouts": "",
                        "digit-len": "",
                        "tts-engine": "",
                        "tts-voice": "",
                        "tts-open": "",
                    },
                    "entry": [
                        {"@attributes": {action: "", digits: "", param: ""}}
                    ]
                };
                that.configs.menu.push(menu);
            },
            save: function () {
                var that = this;
                layer.msg("正在刷新后台配置！");
                var index = layer.load(1, {shade: false});
                that.$post('cti-manager-ivr/save', {data: that.configs, path: that.path})
                    .then((response) => {//这里使用了ES6的语法
                        if (response.data == 1) {
                            layer.msg("保存成功！", {icon: 1});
                        } else {
                            layer.msg("保存失败！", {icon: 2});
                        }
                        layer.close(index)
                    }).catch((response) => {
                    layer.msg("错误！", {icon: 2});
                    layer.close(index)
                });
            },
            afterRender: function () {//在上一个渲染完成后
                var that = this;
                // Vue.component('button-counter', {
                //     render: function(createElement) {
                //         consoleLog(this)
                //         $(this.$slots.default).attr("v-model","aas");
                //         alert(this.aas)
                //         return createElement(
                //             "div",
                //             this.$slots.default
                //         );
                //     },
                //     updated:function(){
                //         alert(this.aas)
                //     },
                //     computed:{
                //         aas:function () {
                //             return this.model;
                //         }
                //     },
                //     data() {
                //         return {
                //             id:Math.random()+"_"+Math.random()+"_"+Math.random()
                //         }
                //     },
                //     props: {
                //         model: {
                //         }
                //     },
                //     // template:"<div><slot></slot></div>"
                // });
                that.$nextTick(function () {
                    //表示上面的渲染完成后才会触发事件
                    //监听指定开关
                    layui.form.on('switch(switch)', function (data) {
                        if (this.checked) {
                            layer.msg('已开启', {
                                offset: '6px',
                                icon: 6
                            });
                            that.showIvr = true;
                        } else {
                            layer.msg('已关闭', {
                                offset: '6px',
                                icon: 5
                            });
                            that.showIvr = false;
                        }
                    });
                    //查询完了数据，就对每个数据进行事件赋予
                    for (let i = 0; i < that.configs.menu.length; i++) {
                        //监听保存按钮事件的提交
                        layui.form.on('submit(save)', function (data) {
                            that.save();
                            return false;
                        });
                        layui.upload.render({
                            elem: '#greet_long_' + i //绑定元素
                            , url: burl + 'cti-manager-ivr/upload-fs/' //上传接口
                            , data: {type: "cti_ivr_wav"}
                            , accept: "audio"
                            , done: function (res) {
                                if (res == 1) {
                                    layer.msg("文件已经上传！", {icon: 2});
                                } else {
                                    layer.msg("文件上传成功！", {icon: 1});
                                    that.$set(that.configs.menu[i]['@attributes'], 'greet-long', res.path);
                                    that.$set(that.configs.menu[i]['@attributes'], 'http-src-greet-long', res.src);
                                }
                            }
                            , error: function () {
                                //请求异常回调
                            }
                        });
                        layui.upload.render({
                            elem: '#greet_short_' + i //绑定元素
                            , url: burl + 'cti-manager-ivr/upload-fs/' //上传接口
                            , data: {type: "cti_ivr_wav"}
                            , accept: "audio"
                            , done: function (res) {
                                if (res == 1) {
                                    layer.msg("文件已经上传！", {icon: 2});
                                } else {
                                    layer.msg("文件上传成功！", {icon: 1});
                                    that.$set(that.configs.menu[i]['@attributes'], 'greet-short', res.path);
                                    that.$set(that.configs.menu[i]['@attributes'], 'http-src-greet-short', res.src);
                                }
                            }
                            , error: function () {
                                //请求异常回调
                            }
                        });
                        layui.upload.render({
                            elem: '#invalid_sound_' + i //绑定元素
                            , url: burl + 'cti-manager-ivr/upload-fs/' //上传接口
                            , data: {type: "cti_ivr_wav"}
                            , accept: "audio"
                            , done: function (res) {
                                if (res == 1) {
                                    layer.msg("文件已经上传！", {icon: 2});
                                } else {
                                    layer.msg("文件上传成功！", {icon: 1});
                                    that.$set(that.configs.menu[i]['@attributes'], 'invalid-sound', res.path);
                                    that.$set(that.configs.menu[i]['@attributes'], 'http-src-invalid-sound', res.src);
                                }
                            }
                            , error: function () {
                                //请求异常回调
                            }
                        });
                        layui.upload.render({
                            elem: '#exit_sound_' + i //绑定元素
                            , url: burl + 'cti-manager-ivr/upload-fs/' //上传接口
                            , data: {type: "cti_ivr_wav"}
                            , accept: "audio"
                            , done: function (res) {
                                if (res == 1) {
                                    layer.msg("文件已经上传！", {icon: 2});
                                } else {
                                    layer.msg("文件上传成功！", {icon: 1});
                                    that.$set(that.configs.menu[i]['@attributes'], 'exit-sound', res.path);
                                    that.$set(that.configs.menu[i]['@attributes'], 'http-src-exit-sound', res.src);
                                }
                            }
                            , error: function () {
                                //请求异常回调
                            }
                        });
                    }
                });

            }

        }
    }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>

    //修改这两者以达到让layui的左边不要太小了
    .layui-form-pane .layui-form-label {
        width: 250px
    }

    .margin_400 {
        margin-left: 400px;
        left: 400px;
    }

    .layui-form-pane .layui-input-block {
        margin-left: 250px;
    }
</style>
